<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>节点</title>
	<style type="text/css">
        #div1{
        	width:200px;height:200px;background:red;
        }

        #box{
        	width:200px;height: 200px;background: blue;
        }
	</style>
</head>
<body>
    <div id="div1">
    	<p id="p1">这是一个段落</p>
        
        <p id="p2">这是另一个段落</p>

    </div>

    <script type="text/javascript">
        //添加节点
       
        //创建一个新的p元素
        var para = document.createElement('p');
        //要向文本添加文本，必须先创建一个文本节点
        //创建文本节点
        var node =  document.createTextNode('这是新段落');
        //向p元素追加这个文本节点
        para.appendChild(node);
        //最后必须向一个已有元素追加这个新元素
        //先找到已有元素的代码
        var element = document.getElementById('div1');
        //然后向这个已有元素追加新元素
        element.appendChild(para);
                
    </script>



    <div id="box">
    	<p id="con1">这是第一个文本</p>

        <p id="con2">这是第二个文本</p>
    </div>

    <script type="text/javascript">
        //删除节点
        
        //方法一：
        //如需删除已有的HTML元素，就必须获得该元素的父元素
        //找到父元素  父元素id="box"
        var parent = document.getElementById('box');
        //找到要删除的子元素    con1
        var child = document.getElementById('con1');
        //删除子元素   box下的第一个p文本   也就是paerent下的child
        parent.removeChild(child);

        
        //方法二:
        //也可以通过child来找到父元素
        var con2 = document.getElementById('con2');
        //使用parentNode属性找到父元素
        con2.parentNode.removeChild(con2);

    </script>
	
</body>
</html>